<template>
  <div
    :class="{
      'fields-block-active': nowDrag.ofdid == fieldsObj.ofdid,
    }"
    @click="emitClick"
    :style="`width: ${getFormValue('width')}%`"
    class="fields"
  >
    <template v-if="nowDrag.ofdid == fieldsObj.ofdid">
      <template v-if="rowList.length !== 0">
        <img
          @click="operateDown"
          src="../../img/move-down.png"
          alt=""
          class="edit-action edit-down"
        />

        <img
          @click="operateUp"
          v-if="judegeUpLen()"
          src="../../img/move-up.png"
          alt=""
          class="edit-action edit-up"
        />
      </template>

      <template v-else>
        <img
          @click="operateUp"
          v-if="judegeUpLen() && index != 0"
          src="../../img/move-up.png"
          alt=""
          class="edit-action edit-up"
        />
      </template>

      <template v-if="showRowOperate">
        <img
          v-if="rowIndex != 0"
          @click="operateLeft"
          src="../../img/move-row.png"
          alt=""
          class="edit-action move-left"
        />

        <img
          v-if="rowList.length - 1 != rowIndex"
          @click="operateRight"
          src="../../img/move-row.png"
          alt=""
          class="edit-action move-right"
        />
      </template>
    </template>

    <div class="fields-bottom-top">
      <h5>
        {{ fieldsObj.title }}
      </h5>
      <template v-if="nowDrag.ofdid == fieldsObj.ofdid">
        <div @click="deleteDrag()" class="delete-fields">
          <i class="el-icon-delete"></i>
        </div>
      </template>
    </div>

    <div class="fields-bottom-center">
      {{ fieldsObj.desc }}
    </div>

    <template v-if="fieldsObj.type == 'time'">
      <CTime :fields="fieldsObj" />
    </template>

    <template v-else-if="fieldsObj.type == 'select'">
      <CSelect :fields="fieldsObj" />
    </template>

     <template v-else-if="fieldsObj.type == 'timerange'">
      <CTimeRange :fields="fieldsObj" />
    </template>

    <template v-else-if="fieldsObj.type == 'cascadeChoice'">
      <CCascadeChoice :fields="fieldsObj" />
    </template>

    <template v-else-if="fieldsObj.type == 'file'">
      <CFile :fields="fieldsObj" />
    </template>

    <template v-else>
      <CCommon :fields="fieldsObj" />
    </template>

    <div
      v-if="fieldsObj.type == 9 || fieldsObj.type == 11"
      class="fields-bottom-options"
    >
      <div v-if="fieldsObj.settings.selectMode == 0">
        <el-select v-model="disableEmpty" class="lpage-form_select">
          <el-option
            v-for="(vi, vk) in fieldsObj.settings.options"
            :key="`${vk}o`"
            :label="vi.label"
            :value="vi.value"
            disabled
          ></el-option>
        </el-select>
      </div>

      <template v-else>
        纵向:
        <template v-if="fieldsObj.settings.distribution == 1">
          <div
            v-for="(vi, vk) in fieldsObj.settings.options"
            :key="`${vk}1`"
            :class="{ 'options-portait-circle': fieldsObj.type == 9 }"
            class="options-portait"
          >
            {{ vi.label }}
          </div>
        </template>

        <template v-else>
          <div class="options-row">
            <div
              v-for="(vi, vk) in fieldsObj.settings.options"
              :class="{ 'options-portait-circle': fieldsObj.type == 9 }"
              :key="vk"
              class="options-portait"
            >
              {{ vi.label }}
            </div>
          </div>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { GetSingle } from '../../plugins/utils'
import CTime from './CTime'
import CCommon from './CCommon'
import CSelect from './CSelect'
import CTimeRange from './CTimeRange'
import CCascadeChoice from './CCascadeChoice'
import CFile from './CFile'


export default {
  components: {
    CTime,
    CCommon,
    CSelect,
    CTimeRange,
    CCascadeChoice,
    CFile
  },
  name: 'FieldsCenter',
  props: {
    index: {
      default: 0,
    },
    rowIndex: {
      default: 0,
    },
    rowList: {
      default: () => {
        return []
      },
    },
    nowDrag: {
      default: () => {
        return {}
      },
    },

    fieldsObj: {
      default: () => {
        return {}
      },
    },
    showRowOperate: {
      default: false,
    },
  },

  computed: {
    staticDrageFields () {
      return this.$store.state.contentDrageFields
    },
  },

  data () {
    return {
      disableEmpty: '',
    }
  },
  methods: {
    emitClick () {
      this.$emit('click')
    },
    // 获取二级的值
    getFormValue (key) {
      return this.fieldsObj.settings ? this.fieldsObj.settings[key] : ''
    },

    // 判断当前选中的上个数组的长度
    judegeUpLen () {
      if (!this.index) {
        return true
      }
      let upLen = this.staticDrageFields[this.index - 1]
      return upLen.length !== 2
    },
    // 向下移动
    operateDown () {
      let rowList = GetSingle(this.rowList)
      let list = GetSingle(this.staticDrageFields)
      // 修改同行数组，并且拿到删除的值
      let newList = rowList.splice(this.rowIndex, 1)
      // 修改外层数组
      list.splice(this.index, 1, rowList)
      list.splice(this.index + 1, 0, newList)
      list = this.updateListWidth(list)

      this.$store.dispatch('setContentDrageFields', list)
    },

    // 向上的操作
    operateUp () {
      let list = GetSingle(this.staticDrageFields)
      if (this.rowList.length == 0) {
        list[this.index - 1].push(this.nowDrag)
        list.splice(this.index, 1)
        list = this.updateListWidth(list)
      } else {
        let rowList = GetSingle(this.rowList)
        // 修改同行数组，并且拿到删除的值
        let newList = rowList.splice(this.rowIndex, 1)
        // 修改外层数组
        list.splice(this.index, 1, rowList)

        if (this.index == 0) {
          list.unshift(newList)
        } else {
          list.splice(this.index - 1, 1, [...list[this.index - 1], ...newList])
        }
        list = this.updateListWidth(list)
      }

      this.$store.dispatch('setContentDrageFields', list)
    },

    // 向左边移动
    operateLeft () {
      let rowList = GetSingle(this.rowList)
      let newList = rowList.splice(this.rowIndex, 1)
      let list = GetSingle(this.staticDrageFields)

      rowList.splice(this.rowIndex - 1, 0, newList[0])
      list[this.index] = rowList
      this.$store.dispatch('setContentDrageFields', list)
    },

    // 向左边移动
    operateRight () {
      let rowList = GetSingle(this.rowList)
      let newList = rowList.splice(this.rowIndex, 1)
      let list = GetSingle(this.staticDrageFields)

      rowList.splice(this.rowIndex + 1, 0, newList[0])
      list[this.index] = rowList
      this.$store.dispatch('setContentDrageFields', list)
    },
    // 修改 文字类型的宽度
    updateListWidth (list) {
      let list1 = GetSingle(list)
      list1.forEach((item) => {
        let len = item.length
        item.forEach((row) => {
          row.settings.width = this.setFieldsWidth(len)
        })
      })

      return list1
    },

    // 删除
    deleteDrag () {
      console.log('为啥不可以')
      let list = GetSingle(this.staticDrageFields)
      // 同一行，只有一个
      if (this.rowList.length == 0) {
        list.splice(this.index, 1)
      } else {
        let rowList = GetSingle(this.rowList)
        rowList.splice(this.rowIndex, 1)
        list.splice(this.index, 1, rowList)
        list = this.updateListWidth(list)
      }
      this.$store.dispatch('setContentDrageFields', list)
    },

    // 获取时间格式的展示
    getTimeFormat (value, formatType) {
      return dayjs(value).format(formatType)
    },
    // 设置宽度
    setFieldsWidth (len) {
      let width = 25
      switch (len) {
      case 1:
        width = 100
        break
      case 2:
        width = 50
        break
      default:
        width = 25
        break
      }

      return width
    },
  },

  mounted () {
  }
}
</script>

<style lang="less" scoped>
.fields-block-active {
  background: rgba(65,125,255,0.1) !important;
  border-radius: 3px;
}
.fields {
  flex: 1;
  position: relative;
  cursor: pointer;
  padding: 16px;
  cursor: move;
  display: inline-block;
}

.delete-fields {
  width: 44px;
  height: 32px;
  background: #FFFFFF;
  box-shadow: 0px 2px 6px 0px rgba(0,21,41,0.12);
  border-radius: 3px;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;

  .el-icon-delete {
    cursor: pointer;
  }
}

.fields-bottom-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  h5 {
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #262A30;
    flex: 1;
  }

  img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }
  }
}

/deep/ .fields-bottom-input {
  border: 1px solid #dcdfe6;
  background-color: #ffffff;
  border-radius: 4px;
  min-height: 32px;
  max-height: 96px;
  overflow-y: auto;
  line-height: 20px;
  padding: 0 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  .input-tips {
    color: #CBCFD6;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .input-content {
    color: #282a2a;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}

.fields-bottom-center {
  font-size: 12px;
  color: #717777;
  margin-bottom: 8px;
}
.edit-action {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 40px;
  height: 40px;
  z-index: 10;
  cursor: pointer;
}
.edit-up {
  top: -16px;
}

.edit-down {
  bottom: -20px;
}

.move-left {
  top: 0;
  bottom: 0;
  margin: auto;
  left: -16px;
  right: auto;
}
.move-right {
  top: 0;
  bottom: 0;
  margin: auto;
  left: auto;
  right: -16px;
}

.fields-bottom-options {
  .options-row {
    // .flex(center, '', '', wrap);
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .options-portait {
      margin-right: 20px;
    }
  }

  .options-portait {
    margin-bottom: 8px;
    color: #494d4c;
    font-size: 14px;
    // .flex(center);
    display: flex;
    align-items: center;

    &::before {
      content: "";
      margin-right: 6px;
      width: 10px;
      height: 10px;
      display: block;
      border: 2px solid darkgray;
    }
  }

  .options-portait-circle {
    &::before {
      border-radius: 50%;
    }
  }
}
</style>
